<template>
  <div class="container">
    <div class="form__box">
      <Form ref="formInline" :model="formInline" :rules="ruleInline">
        <FormItem prop="user">
          <Input type="text" v-model="formInline.user" placeholder="账号">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="formInline.password" placeholder="密码">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formInline')" long>登录</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import Api from '@/api';
import md5 from 'md5';
import { test } from '@/components';

export default {
  data() {
    return {
      formInline: {
        user: "",
        password: ""
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            type: "string",
            max: 12,
            message: "密码不能超过12位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  components: {
    test,
  },
  created() {
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          const { user, password } = this.formInline;
          const userInfo = {
            mobilephone: user,
            password: md5(password),
          }
          Api.login(userInfo).then(res => {
            console.log(res);
            this.$router.push({name: 'audit'});
          })
        } else {
          this.$Message.error("Fail!");
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.container 
  height 100%
  display: flex
  justify-content center
  align-items center
  background: linear-gradient(45deg,rgb(46, 93, 179),rgb(130, 187, 240));
.form__box
  background: #eee;
  border-radius 10px
  padding: 24px 24px 0
  width: 300px
</style>
